<template>
  <div id="app">
    <back class="back"></back>
    <p class="title">景点介绍</p>
    <div class="list" v-for="(item, index) in list" :key="index">
      <p class="list-name">{{ item.name }}</p>
    </div>
  </div>
</template>

<script>
import back from './back.vue'
export default {
  name: 'introduce',
  data () {
    return {
      list: [{
        name: '北碚自然博物馆'
      }, {
        name: '重庆巴渝民俗博物馆'
      }, {
        name: '开州博物馆'
      }, {
        name: '国民政府军事委员会政治部旧址'
      }, {
        name: '云阳县博物馆'
      }, {
        name: '蒋家院子秘密囚室'
      }, {
        name: '六店子刘伯承旧居'
      }, {
        name: '	“三三一惨案”死难志士群葬墓'
      }, {
        name: '中共四川临时省委会议旧址暨周贡植故居'
      }, {
        name: '《挺进报》旧址'
      }, {
        name: '李蔚如烈士陵园'
      }, {
        name: '四川省立第四师范学校旧址'
      }, {
        name: '第二十军军事政治学校遗址'
      }]
    }
  },
  components: {
    back
  }
}
</script>

<style scoped>
  #app {
    margin: 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .title {
    margin-top: 30px;
    font-size: 20px;
    font-weight: bold ;
  }

  .list {
    margin: 0 auto;
    width: 85%;
    height: 50px;
    border-bottom: 2px solid #ddd;
  }

  .list-name {
    line-height: 80px;
    margin: 0px;
    text-align: left;
    font-weight: bold;
  }
</style>
